<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div style="margin-left: 500px">
        <div style="margin: 160px 0;"></div>
        <el-container center>
            <el-header><h1>欢迎登录后台管理系统</h1></el-header>
            <el-main>
                <el-input
                        type="text"
                        placeholder="请输入用户名"
                        v-model="aname"
                        maxlength="10"
                        show-word-limit
                        style="width: 300px"
                ></el-input>
                <br/>
                <div style="margin: 60px 0;"></div>
                <el-input placeholder="请输入密码" v-model="pwd" show-password style="width: 300px"></el-input>
            </el-main>
        </el-container>
        <div style="margin: 30px 0;"></div>
        <div>
            <div style="margin-left: 30px">
                <el-button type="primary" @click="login()">登录<i class="el-icon-upload el-icon--right"></i></el-button>
            </div>


        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                aname: "",
                pwd: ""
            }
        },
        methods: {
            login: function () {
                var params = new URLSearchParams();
                params.append("aname", this.aname);
                params.append("pwd", this.pwd);
                axios.post("/auth/login", params).then(res => {
                    if (res.data.code == 200) {
                        var storage = window.localStorage;
                        storage.clear();
                        storage.setItem("token", res.data.token);
                        storage.setItem("refreshToken", res.data.refreshToken);
                        window.location.href = "index.html"
                    } else {
                        this.$message({
                            type: 'error',
                            message: '账号或密码错误'
                        });
                    }

                });
            }
        }
    })
</script>
</body>
</html>